"use client";

import React from "react";
import ReactECharts from "echarts-for-react";

export default function TabTwo() {
    const species = [
        "Human",
        "Mouse",
        "Zebrafish",
        "Yeast",
        "Fruit Fly",
        "Arabidopsis",
        "E. coli",
        "C. elegans",
        "Dog",
        "Cat",
    ];

    const values = [120, 200, 150, 80, 70, 110, 130, 95, 160, 140];

    const colors = [
        "#4caf50", // Green
        "#2196f3", // Blue
        "#9c27b0", // Purple
        "#00bcd4", // Cyan
        "#ff9800", // Orange
        "#607d8b", // Gray Blue
        "#8bc34a", // Light Green
        "#3f51b5", // Indigo
        "#ffc107", // Amber
        "#009688", // Teal
    ];

    const option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "8%",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            data: species,
            axisLabel: {
                rotate: 30,
            },
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                name: "Hi-C Datasets",
                type: "bar",
                data: values.map((v, i) => ({
                    value: v,
                    itemStyle: { color: "#8bc34a" },
                })),
                barWidth: "50%",
            },
        ],
    };

    return (
        <div className="w-full h-[400px]">
            <ReactECharts option={option} style={{ height: "100%" }} />
        </div>
    );
}
